<template>
    <el-dialog v-model="state.dialog.player.show" top="10vh" width="990px" @close="onClose">
        <template #header>
            <div class="title">视频播放</div>
        </template>
        <div class="virtual-video-stream-play-container">
            <div class="video-container">
                <div id="virtual_video_stream_player_container"></div>
            </div>
            <div class="stream-push-play-url">
                <el-input v-model="state.dialog.player.url_input" style="width: 100%" placeholder="Please input" class="input-with-select">
                    <template #prepend>
                        <el-select v-model="state.dialog.player.url_selected" style="width: 115px" @change="onChangeUrl">
                            <el-option value="http_flv">http_flv({{ state.dialog.player.url['http_flv'] }})</el-option>
                            <el-option value="rtmp">rtmp({{ state.dialog.player.url['rtmp'] }})</el-option>
                            <el-option value="rtsp">rtsp({{ state.dialog.player.url['rtsp'] }})</el-option>
                        </el-select>
                    </template>
                </el-input>
            </div>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import { inject, onMounted, ref } from 'vue';
import { TableState } from '@/components/table/table';
import { VirtualVideoStreamTableDataState, VirtualVideoStreamTableDialogState } from '@/views/admin/virtualvideostream/interface';

const state = inject('state') as TableState<VirtualVideoStreamTableDataState, VirtualVideoStreamTableDialogState>;

const onClose = () => {
    state.dialog.player.show = false;
    state.dialog.player.jessibuca.destroy();
};

const onPlayer = () => {
    state.dialog.player.show = true;
    initPlayer();
};

const initPlayer = () => {
    window.setTimeout(() => {
        // @ts-ignore
        state.dialog.player.jessibuca = new Jessibuca({
            container: '#virtual_video_stream_player_container',
            videoBuffer: 0.2, // 缓存时长
            decoder: '/GB28181/jessibuca/decoder.js',
            isResize: false,
            text: '',
            loadingText: '加载中',
            debug: true,
            showBandwidth: true, // 显示网速
            operateBtns: {
                fullscreen: true,
                screenshot: true,
                play: true,
                audio: true,
            },
            forceNoOffscreen: true,
            isNotMute: false,
        });
        console.log('播放', state.dialog.player.url.http_flv);
        state.dialog.player.url_selected = 'http_flv';
        state.dialog.player.url_input = state.dialog.player.url.http_flv;
        state.dialog.player.jessibuca.play(state.dialog.player.url.http_flv);
    }, 500);
};

const onChangeUrl = ()=>{
  state.dialog.player.url_input = state.dialog.player.url[state.dialog.player.url_selected];
}

defineExpose({
    onPlayer,
});
</script>

<style scoped lang="scss">
.virtual-video-stream-play-container {
    width: 960px;
    height: 580px;

    .video-container {
        width: 100%;
        height: 540px;
    }
}
</style>
